<template>
  <div>
    <slot></slot>
    <div class="blackscreen">
      <div class="messageBox">
          <div class="card_title">
            <button class="card_title_close" @click="message_close()"><svg t="1673543859057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7410" width="24" height="24"><path d="M585.412525 512.594747L973.601616 124.418586c19.600808-19.600808 19.600808-51.898182 0-71.49899l-2.120404-2.120404c-19.600808-19.600808-51.898182-19.600808-71.49899 0L511.793131 439.518384 123.61697 50.799192c-19.600808-19.600808-51.898182-19.600808-71.49899 0l-2.120404 2.120404c-20.11798 19.600808-20.11798 51.898182 0 71.49899l388.189091 388.189091L49.997576 900.783838c-19.587879 19.600808-19.587879 51.898182 0 71.49899l2.120404 2.120404c19.600808 19.600808 51.898182 19.600808 71.49899 0L511.793131 586.214141l388.189091 388.176162c19.600808 19.600808 51.898182 19.600808 71.49899 0l2.120404-2.120404c19.600808-19.600808 19.600808-51.898182 0-71.49899L585.412525 512.594747z m0 0" p-id="7411"></path></svg></button>
             <h2 class="card_title_info"></h2>
          </div>
          <div class="message_info">
            <div class="message_info_content">
               <!-- <h1>{{content}}</h1> -->
               扫描二维码支付
               <span v-show="showsuc" style="color:green;font-size:20px">支付成功</span>
               <img src="/static/ercode/ercode.png" alt="">
            </div>
          </div>
           <div class="message_info_btns">
              <el-button class="message_info_btn" type="primary" @click="checkPay()" :loading="checkLoading">
                {{ CollectStatus ? '支付成功' : '支付查验'}}
                </el-button>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'mybillPop',
  data () {
    return {
      msg: '',
      checkLoading:false,
      CollectStatus:false,
      showsuc:false,
    }
  },
  methods: {
    message_close(){
      this.$emit('closeBillMessage', false)
    }
    ,checkPay(){
        this.checkLoading = true
        setTimeout(() => {
            this.CollectStatus = true;
            this.showsuc = true
        }, 500);
        
        setTimeout(() => {
            this.checkLoading = false;
            this.$emit('toOrderPage', true);
        }, 2000);
    }
  },
  mounted () {

  }
}
</script>

<style scoped>
h1, h2, h3, h4, h5, h6,a,
div,p,fieldset,legend,span{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
.blackscreen{
    overflow: hidden;
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    transition: .8s;
    animation: blackDetails 300ms;
    animation-fill-mode: forwards;
}
@keyframes blackDetails{
  form{
      background-color: rgba(0, 0, 0,0.4);
  }
  to{
     background-color: rgba(27, 26, 26, 0.6);
  }
}

.messageBox{
   position: fixed;
  /* right: 30px; */
  /* animation: cartAnimation 300ms;
  animation-fill-mode: forwards; */
  background: rgb(255,255,255);
  z-index: 11;
  width:auto;
  top: 20%;
  left: 37%;
  height: 400px;
  border-radius: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.card_title{
    padding-top: 12px;
    padding-right: 20px;
    padding-left: 10px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    /* display: inline; */
}
.card_title_info{
  color: rgb(16, 16, 16);
  font-weight: 500;
  font-size: 22px;
  margin-top: 20px;
  position: relative;
  left: 10px;
   /* display: inline; */
}
.card_title_close{
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    border: 0px;
    text-decoration: underline 1.5px rgb(17, 17, 17);
    text-underline-offset: 3px;
    float: right;
    display: inline;
    /* border-radius: 120px; */
    background:transparent;
}
.message_info{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 400px;
  
  /* border: 1px solid red; */
}
.message_info_content{
  width: 350px;
  margin-left: 20px;
  padding: 5px;
  /* margin: 0 auto; */
}
.message_info_content img{
    width: 350px;
    height: 250px;
}
.message_info_content h1{
  color: black;
  font-size: 20px;
  font-weight: 600;
}
.message_info_btns{
  position: absolute;
  /* right: 0; */
  float: right;
  right: 30px;
  top: 350px;
}
.message_info_btn{
  /* margin-top: 55px; */
  position: relative;
  padding: 10px 20px;
  background: rgb(17, 17, 17);
  border-radius: 30px;
  outline: 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  color: aliceblue;
  border: 1px solid transparent;
  transition: .4s;
  top: 2px;

}
.message_info_btn:active{
  /* background: rgb(58, 57, 57); */
   border: 4px solid transparent;
}
</style>
